﻿<%@ Page Language="C#" AutoEventWireup="true" EnableSessionState="True" CodeBehind="PopupSignatureH5.aspx.cs" Inherits="MTRC.ODMS.Web.SOM.Popup.PopupSignatureH5" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
   
</head>
<body>
    <form id="form1" runat="server">
      <div class="htmleaf-container">
	
		    <div class="container">
            <div class="row" style="display:none">
                <div class="col-xs-12">
                    <h3>基本例子：</h3>
                    <p>Sign Below:</p>
                    <div class="js-signature"></div>
                </div>
            </div>
            <div class="row">
	            <div class="col-xs-12">		 
		            <div class="js-signature" data-width="100" data-height="120" data-border="1px solid black" data-line-color="#bc0000" data-auto-fit="true"></div>		      
                    
                    <asp:Button ID="clearBtn" runat="server" Text="Clear" OnClientClick="clearCanvas();" />
                    <asp:Button ID="saveBtn" runat="server" Text="Save" disabled OnClientClick="saveSignature();" OnClick="btnSave_Click" />
                   
                    
		            <div id="signature" runat="server" >
			        
		            </div>
	            </div>
            </div>
		    </div>
	
	    </div>
         <input type="hidden" name="hidImg" id="hidImg" runat="server" value="" />
          <asp:Panel ID="pnlSignaturePic" runat="server" Width="100%" Direction="RightToLeft" Visible=true>
                        <asp:Image ID="imgSignaturePic" runat="server" style="border-width:1px; border-color:Black;" Width="250px" Height="150px" />
                        <asp:Button ID="btnClear" runat="server" Text="Clear"  Visible="false" /> <%--//huangyao 20090122 fixed TD:1156--%>
                    </asp:Panel>
    </form>
	
	<script type="text/javascript" src="../../Javascript/SOM/SignatureH5/jquery-1.11.0.min.js"></script>
	<script type src="../../Javascript/SOM/SignatureH5/jq-signature.js"></script>
	<script type="text/javascript">
	    $(document).on('ready', function () {
	        if ($('.js-signature').length) {
	            $('.js-signature').jqSignature();
	        }
	    });

	    function clearCanvas() {
//	        $('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
	        $('.js-signature').eq(1).jqSignature('clearCanvas');
	        $('#saveBtn').attr('disabled', true);
	    }

	    function saveSignature() {
	        $('#signature').empty();
	       
	        var dataUrl = $('.js-signature').eq(1).jqSignature('getDataURL');
	        document.getElementById('hidImg').value = dataUrl;
	        //alert(document.getElementById('hidImg').value);
	        var img = $('<img>').attr('src', dataUrl); 
//	        $('#signature').append($('<p>').text("Here's your signature:"));
	        $('#signature').append(img);
	    }

	    $('.js-signature').eq(1).on('jq.signature.changed', function () {
	        $('#saveBtn').attr('disabled', false);
	    });
	</script>

</body>
</html>
